<template>
    <el-dialog
        class="dialog"
        :title="title"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        @close="onDialogClose"
    >
        <el-form
            ref="form"
            class="form-bwrap form-layer-top"
            labelPosition="top"
            :model="formData"
            :rules="rules"
        >
            <el-form-item label="楼栋名称:" prop="build_name">
                <el-input
                    v-model="formData.build_name"
                    clearable
                    maxlength="20"
                    placeholder="请输入楼栋名称"
                ></el-input>
            </el-form-item>
            <el-form-item label="建筑面积:" prop="build_size">
                <el-input-number
                    :min="1"
                    :max="999"
                    placeholder="请输入建筑面积"
                    v-model="formData.build_size"
                ></el-input-number>
            </el-form-item>
            <el-form-item label="电梯数量:" prop="elevator_num">
                <el-input-number
                    :min="1"
                    :max="999"
                    :precision="0"
                    placeholder="请输入电梯数量"
                    v-model="formData.elevator_num"
                ></el-input-number>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="onDialogClose">取 消</el-button>
            <el-button class="btn-confirm" @click="onSubmit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
@Component({
    name: "HouseBuildingsEdit",
    mixins: [mixinDialogForm]
})
export default class HouseBuildingsEdit extends Vue {
    @Action("houseBuildings/add") itemAdd: any;
    @Action("houseBuildings/edit") itemEdit: any;

    init(data: any) {
        const me = this as any;
        me.formData = Object.assign({}, me.formData, data);
    }

    formData: any = {
        build_sn: "",
        build_name: "",
        build_size: "",
        elevator_num: ""
    };

    // 表单验证
    rules: any = {
        build_name: [
            {
                required: true,
                message: "请输入楼栋名称"
            }
        ],
        build_size: [
            {
                required: true,
                message: "请输入建筑面积"
            }
        ],
        elevator_num: [
            {
                required: true,
                message: "请输入电梯数量"
            }
        ]
    };
    // 标题
    get title() {
        return (this as any).isEdit ? "修改楼栋" : "新建楼栋";
    }
}
</script>